<template>
  <div id="app">
    <img src="./assets/logo.png">
    <h1>商品列表 - 静态组件 --> 动态组件 --> 动态遍历</h1>

    <!-- 便利数据, 将 商品名称 传递到子组件中, 实现动态渲染, 用引用组件的方式, 减少重复使用的代码 -->

    <!-- 通过 Props , 来自定义组件中的部分内容 -->
    <Card :title="good.title" :key="index" v-for="(good, index) in goods"></Card>

  </div>
</template>

<script>
// 引入组件
import Card from "./components/Card.vue";
export default {
  name: 'App',
  components: { // 注册组件
    Card
  },
  data: function() {
    return {
      goods: [{title: "茄子"},{title: "薯片"},{title: "西瓜"},{title: "哇哈哈"}]
    }
  }
}
</script>

<style>
#app {
  font-family: 'Avenir', Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
}
</style>
